<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<title>Insert title here</title>

<style type="text/css">
* {
	padding: 0;
	margin: 0;
}

#ahoi-line-container {
	margin-top: 60px;
}

#ahoi-line-container ul {
	list-style: none;
}

#ahoi-line-container .ahoi-line {
	width: 0;
	height: 0;
	margin: 0 20px 0 100px;
}

#ahoi-line-container .ahoi-line>li {
	float: left;
}

#ahoi-line-container .line-point {
/*  	background-color: #d7d7d7; */
	border-radius: 10px;
 	background: -webkit-linear-gradient(top, #d7d7d7, #f5f5f5, #d7d7d7) !important;
	background: -ms-linear-gradient(top, #d7d7d7, #f5f5f5, #d7d7d7) !important; /*IE11*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#d7d7d7',GradientType=0 );/*IE6-8*/ 
}

#ahoi-line-container .line-point>li>div {
	line-height: 60px;
}

#ahoi-line-container .line-point>li>ul>li{
	float:left;
}

#ahoi-line-container .line-box {
	border: 3px solid #d76f17;
	padding: 1px 5px;
	background-color: #fff;
	position: relative;
	cursor: pointer;
}

#ahoi-line-container .line-box:hover{
	background-color: #fd7f15;
    color: #fff;
}

#ahoi-line-container .line-box-l {
	width: 3px;
	background-color: #d76f17;
	position: relative;
	display: none;
	top:0;
	z-index: 999;
}
#ahoi-line-container .line-box-r {
	width: 3px;
	background-color: #d76f17;
	position: relative;
	display: none;
	z-index: 999;
}

#ahoi-line-container .line-part div { 
	text-align: center;
    line-height: 30px;
}

</style>

<script type="text/javascript">
	// 获取屏幕宽度【兼容IE78】 
	function getWindowWidth() {
		var winW = window.innerWidth;
		var ieVersion = navigator.appVersion.split(";")[1].replace(/[ ]/g, "");
		if (isIE78()) {
			winW = document.documentElement.clientWidth;
		}
		return winW;
	}
	
	function isIE78(){
		var ieVersion = navigator.appVersion.split(";")[1].replace(/[ ]/g, "");
		if (navigator.appName == "Microsoft Internet Explorer"
			&& (ieVersion == "MSIE7.0" || ieVersion == "MSIE8.0")) {
			return true;
		}
		return false;
	}
	
	function showBackcolor(obj){
		var color = $(obj).find('div').css('border-bottom-color');
		color = (color == 'rgb(0, 0, 0)' || color == '#000000' || color == '#000') ? $(obj).find('div').css('border-top-color') : color;
		
		var lineid = $(obj).attr('data-lineid');
		$('li[data-lineid='+lineid+']').find('div').css({'background-color' : color, 'color' : '#fff'});
	}
	
	function hideBackcolor(obj){
		var lineid = $(obj).attr('data-lineid');
		$('li[data-lineid='+lineid+']').find('div').css({'background-color' : '', 'color' : '#000'});
	}

	$(function() {
		
		// IE7下top加2像素 
		var IE_diff = isIE78() ? 2 : 0;
		
		var json = {'point':['广州南','庆盛','虎门','光明城','深圳北'],'line':[
			{'name':'上行','data':[{'width':200,'left':120,'text':'广州南1','color':'#678bdc','style':'top','id':'f234freqf'},
			{'width':500,'left':150,'text':'广州南2','color':'#3eab2b','style':'bottom','id':'afe21221e'},
			{'width':200,'left':600,'text':'广州南3','color':'#ea5f5f','style':'top','id':'fdhhgjy32'}]}, 
			{'name':'下行','data':[{'width':110,'left':240,'text':'广州南1','color':'#678bdc','style':'top','id':'f234freqf'},
			{'width':300,'left':320,'text':'广州南2','color':'#3eab2b','style':'bottom','id':'afe21221e'},
			{'width':230,'left':450,'text':'广州南3','color':'#ea5f5f','style':'top','id':'fdhhgjy32'}]}, 
			{'name':'Ⅰ线','data':[{'width':410,'left':240,'text':'广州南1','color':'#678bdc','style':'top','id':'f234freqf'},
			{'width':260,'left':120,'text':'广州南2','color':'#3eab2b','style':'bottom','id':'afe21221e'},
			{'width':230,'left':850,'text':'广州南3','color':'#ea5f5f','style':'top','id':'fdhhgjy32'}]}]};
		
		var html_wrap = '<div style="margin-bottom: 80px;" id="line-number-{{page}}">'
							+ '<ul class="ahoi-line line-top"></ul>'
							+ '<ul class="ahoi-line line-point"></ul>'
							+ '<ul class="ahoi-line line-bottom"></ul>'
							+ '<span style="position: relative;top: -70px;background-color: #d09741;color: #fff;padding: 6px 10px;letter-spacing: 5px;left: 20px;border-radius: 5px;">'
							+ '{{linename}}</span>'
						+ '</div>';
		var html_line = '<li>'
						+ '<ul>'
							+ '<li class="line-box-l"></li>'
							+ '<li class="line-box"><div>{{pointname}}</div></li>'
							+ '<li class="line-box-r"></li>'
						+ '</ul>'
					+ '</li>';
		var html_top = '<li class="content-li" style="width:{{bwidth}}px;position: absolute;left:{{left}}px;">'
					+ '<ul>'
						+ '<li style="float:left;width:3px;height:40px;background-color:#000;position:relative;top:-1000px;"></li>' 
						+ '<li style="float:left;position: relative;top: -30px;left: -40px;"><div style="font-size:0;">开始公里标</div></li>'
						+ '<li class="line-part" data-lineid="line-id-{{lineid}}" onmouseover="showBackcolor(this);" onmouseout="hideBackcolor(this);" style="float:left;width: {{width}}px;height: 40px;position: relative;top: -20px;*top: -18px;">'
							+ '<div style="border-bottom: 0px solid {{color}};position:absolute;left:0;right:0;">{{text}}</div>'
						+ '</li>'
						+ '<li style="float:right;width:3px;height:40px;background-color:#000;position: relative;top: -1000px;*top: -1000px;"></li>'
						+ '<li style="float:right;position: relative;top: -90px;left: 40px;"><div style="font-size:0;">结束公里标</div></li>'
					+ '</ul>'
				+ '</li>';
		var html_bottom = '<li class="content-li" style="width:{{bwidth}}px;position: absolute;left:{{left}}px;">'
					+ '<ul>'
						+ '<li style="float:left;width:3px;height:40px;background-color:#000;position:relative;top:1000px;"></li>' 
						+ '<li style="float:left;position: relative;top: 50px;left: -40px;"><div style="font-size:0;">开始公里标</div></li>'
						+ '<li class="line-part" data-lineid="line-id-{{lineid}}" onmouseover="showBackcolor(this);" onmouseout="hideBackcolor(this);" style="float:left;width: {{width}}px;height: 40px;position: relative;top: -21px;*top: -19px;">'
							+ '<div style="border-top: 0px solid {{color}};position:absolute;left:0;right:0;">{{text}}</div>'
						+ '</li>'
						+ '<li style="float:right;width:3px;height:40px;background-color:#000;position: relative;top: 1000px;*top: 1000px;"></li>'
						+ '<li style="float:right;position: relative;top: -11px;*top: -9px;left: 40px;"><div style="font-size:0;">结束公里标</div></li>'
					+ '</ul>'
				+ '</li>';
		
		$(json.line).each(function(i, e){
			var flag = true;
			var flag2 = true;
			
			var name = this.name;
			var data = this.data;
			var temp_wrap = html_wrap.replace('{{page}}', i).replace('{{linename}}', name);
			$('#ahoi-line-container').append(temp_wrap);
					
			$('#line-number-'+i+' .ahoi-line').animate({
				width : getWindowWidth() - 166 + 'px',
				height : '40px'
			}, function(){
				
				if(flag2){
					flag2 = false;	
					var temp_line = '';
					$(json.point).each(function(){
						temp_line += html_line.replace('{{pointname}}', this.toString());
					});
					$('#line-number-'+i+' .line-point').append(temp_line);
				}
				
				$('#line-number-'+i+' .line-box').each(function() {
					var width = $(this)[0].offsetWidth / 2;				// 两根竖线的left位置 
					var height = (40 - $(this)[0].offsetHeight) / 2;	// 两根竖线的高度 
					$(this).css({
						'top' : height
					});
					$(this).prev().css({
						'left' : width,
						'height' : height,
						'display' : 'block'
					});
					$(this).next().css({
						'left' : 0 - width - 3,		// 减去边框3像素 
						'height' : height,
						'display' : 'block',
						'top' : 40 - height
					});
				});
				
				$('#line-number-'+i+' .line-point>li').animate({'margin-left':($('#line-number-'+i+' .line-point').width()-200) / ($(json.point).length + 2)}, function(){
					if(flag){
						flag = false;	
						// 动态生成标签 
						for(var j = 0 ; j < data.length ; j++){
							if(data[j].style == 'top'){
								var temp = html_top;
								temp = temp.replace('{{bwidth}}', data[j].width + 6)
											.replace('{{width}}', data[j].width)
											.replace('{{left}}', data[j].left)
											.replace('{{color}}', data[j].color)
											.replace('{{lineid}}', data[j].id)
											.replace('{{text}}', data[j].text);
								$('#line-number-'+i+' .line-top').append(temp);
								$('#line-number-'+i+' .line-top li.content-li:last ul li:eq(0)').animate({'top':0});
								$('#line-number-'+i+' .line-top li.content-li:last ul li:eq(1) div').animate({fontSize:'16px'});
								$('#line-number-'+i+' .line-top li.content-li:last ul li:eq(2) div').animate({'border-bottom-width':10});
								$('#line-number-'+i+' .line-top li.content-li:last ul li:eq(3)').animate({'top':-20+IE_diff});
								$('#line-number-'+i+' .line-top li.content-li:last ul li:eq(4) div').animate({fontSize:'16px'});
							}else{
								var temp = html_bottom;
								temp = temp.replace('{{bwidth}}', data[j].width + 6)
											.replace('{{width}}', data[j].width)
											.replace('{{left}}', data[j].left)
											.replace('{{color}}', data[j].color)
											.replace('{{lineid}}', data[j].id)
											.replace('{{text}}', data[j].text);
								$('#line-number-'+i+' .line-bottom').append(temp);
								$('#line-number-'+i+' .line-bottom li.content-li:last ul li:eq(0)').animate({'top':0});
								$('#line-number-'+i+' .line-bottom li.content-li:last ul li:eq(1) div').animate({fontSize:'16px'});
								$('#line-number-'+i+' .line-bottom li.content-li:last ul li:eq(2) div').animate({'border-top-width':10});
								$('#line-number-'+i+' .line-bottom li.content-li:last ul li:eq(3)').animate({'top':-21+IE_diff});
								$('#line-number-'+i+' .line-bottom li.content-li:last ul li:eq(4) div').animate({fontSize:'16px'});
							}
						}
					}
				});
			});
		});	
	});
	

</script>

</head>

<body>

	<div id="ahoi-line-container"></div>
	
</body>
</html>